<template>
	<table>
		<tr> 
			<th>id</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr v-for="(item, index) in arr" :key="index">
			<td>{{ item.id }}</td>
			<td>{{ item.name }}</td>
			<td v-text="item.age"></td>
			<td><button @click="arr.splice(index, 1)">删除</button></td>
		</tr>
	</table>
</template>

<script setup>
import { reactive } from 'vue'
const arr = reactive([
	{ id: 1, name: '张三', age: 20 },
	{ id: 2, name: '李四', age: 17 },
	{ id: 3, name: '王五', age: 22 },
	{ id: 4, name: '老六', age: 27 }
])
</script>

<style scoped>
	
</style>